React-Native 获取地理信息

背景：

鉴于官网声明国内无法使用GeolocationAPI获取Android设备的地理定位，且国内对于此问题无有效的详解，在此记录我在项目中的解决办法。

运行环境：

  1. 操作系统：Win 10
  2. Java_JDK版本：1.8.0_92
  3. node版本：v10.13.0
  4. git版本：2.19.1.windows.1
  5. python版本：2.0
  6. react-native-cli版本：2.0.1
  7. react-native版本：0.60.4

使用工具：

  1. 高德API
  2. react-native-smart-amap-location

使用步骤

一、创建你的项目

二、获取SHA1

​ （1）进入项目根目录下的android\app（用脚手架创建的项目，该目录下自动创建一个名为debug.keystore的文件）

​ （2）在此目录下运行cmd，键入keytool -list -v -keystore debug.keystore，并输入密码。（密码在创建项目时设置的，默认为android）

​ （3）记录相应的SHA1

SHA1

三、获取packageName

进入项目根目下的android\app\src\main\AndroidManifest.xml，记录对应的package值

packName

四、进入高德官网获取apikey

高德开放平台

  1. 登录后进入控制台，创建应用
  2. 设置apiKey获取apikey
  3. 设置成功后在控制台页面记录专属于你APP的apikeyapikey

五、项目中使用react-native-smart-amap-location

1、安装

1
npm install react-native-smart-amap-location --save

2、配置

在android\app\src\main\AndroidManifest.xml中配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.firstreact">

+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
+    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
+    <uses-permission android:name="android.permission.CHANGE_CONFIGURATION" />
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
+    <uses-permission android:name="android.permission.WRITE_SETTINGS" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

+      <meta-data
        android:name="com.amap.api.v2.apikey"
        android:value="你所申请的apikey"/>
+      <service android:name="com.amap.api.location.APSService"></service>
    </application>

</manifest>

3、修改文件

修改RCTAMapLocationPackage.java文件

进入node_modules\react-native-smart-amap-location\android\src\main\java\com\reactnativecomponent\amaplocation\RCTAMapLocationPackage.java，将所有的@注解删除，防止运行报错

4、使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  ActivityIndicator,
  ActivityIndicatorIOS,
  NativeAppEventEmitter,
  TouchableHighlight,
  Alert
} from "react-native";

import AMapLocation from 'react-native-smart-amap-location'

export default class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
    //使用默认定位配置
    AMapLocation.init(null);
    //添加定位结果的监听事件
    NativeAppEventEmitter.addListener('amap.location.onLocationResult', this._onLocationResult);
  }

  componentWillUnmount() {
    //停止并销毁定位服务
    AMapLocation.cleanUp()
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}>
        <TouchableHighlight
          onPress={this._showReGeocode}>
          <Text>定位逆地理编码信息</Text>
        </TouchableHighlight>
        <TouchableHighlight
          onPress={this._showLocation}>
          <Text>定位地理编码信息</Text>
        </TouchableHighlight>
      </View>
    )
  }

  _onLocationResult = (result) => {
    // Alert.alert(`纬度 = ${result.coordinate.latitude}, 经度 = ${result.coordinate.longitude}`)
    console.warn(result);
  }


  //单次定位并返回逆地理编码信息 可获取详情地理信息（所在城市等）
  _showReGeocode = () => {
    AMapLocation.getReGeocode();
  }

  //单次定位并返回地理编码信息 可获取经纬度值
  _showLocation = () => {
    AMapLocation.getLocation();
  }
}

//在此处写样式
const styles = StyleSheet.create({
});

​ 至此，可获取设备所在的基本地理信息，若要进行进一步的获取，如实时监听位置变化，请参照高德开发平台和react-native-smart-amap-location

react-native-smart-amap-location的方法于事件、

方法

  • init

    • 描述: 初始化定位
    • 参数: locationOptions 类型: Object, 如使用默认值则传null

  • getReGeocode

    • 描述: 单次定位并返回逆地理编码信息

  • getLocation

    • 描述: 单次定位并返回地理编码信息

  • startUpdatingLocation

    • 描述: 连续定位并返回位置信息. 注:连续定位的使用请参见上述的完整示例

  • stopUpdatingLocation

    • 描述: 结束连接定位. 注:连续定位的使用请参见上述的完整示例

事件监听

全局事件: amap.location.onLocationResult

  • 描述: 监听并获取定位信息

注意：关于使用该第三方插件后，将项目打包成apk时报错的解决办法，请参照React-Native APK发行

最后更新： 2019年09月03日 10:43

原始链接： https://HowlCN.github.io/2019/02/10/React-Native 获取地理信息/

赏
× 请我吃糖~
打赏二维码